/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header title="详情">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <div class="title_box">
        <p class="title">{{info.title}}</p>
        <p class="footer" v-if="info.tags && info.tags.length>0">{{info.tags.join()}}</p>
      </div>
      <div class="html_box" v-html="info.answer"></div>
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
import { reqAskDetail } from "../../api/index.js";
export default {
  data() {
    return {
      info: {}
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let id = this.$router.history.current.query.id;
      let result = await reqAskDetail({ id: id });
      if (result.code === 1) {
        this.info = result.data;
      } else {
        this.$vux.toast.show(`获取详情信息失败:${result.msg}`);
      }
    },
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    }
  },
  components: {
    Header
  }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
  background: @white;

  .main {
    width: 100%;
    height: calc(~"100% - 46px");
    position: relative;
    overflow: hidden;
    .mix-flex-center();
    flex-direction: column;
    box-sizing: border-box;
  }

  .title_box {
    width: 100%;
    padding: 10px 15px;
    border-bottom: 1px solid @border-base;
    box-sizing: border-box;
    flex: 0;
    .title {
      font-size: 16px;
      margin-bottom: 10px;
      text-align: center;
    }

    .footer {
      font-size: 12px;
      color: @font-secondary;
      .mix-flex-center();
    }
  }

  .html_box {
    width: 100%;
    flex: 1;
    padding: 15px 10px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
